<template>
    <div class="animation">
        <div class="num" v-if="!isStop">剩余次数 {{ this.allGroupNum - currentGrou - 1}}</div>
        <div class="circle" ref="circle">
            <canvas ref="canvas" height="500" width="500" class="canvas"></canvas>
            <div class="tips"> {{msg}} </div>
            <div class="rotate" ref="rotate"></div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        allGroupNum: {
            type: Number,
            default() {
                return 3
            },
        },
        groupInfo: {
            type: Array,
            default() {
                return [
                    { duration: 4, msg: '鼻子吸气', bg: '#D1D1D1'},
                    { duration: 7, msg: '让气充满全身', bg: '#FFDFA6' },
                    { duration: 8, msg: '按打哈欠的方式吐气', bg: '#E3A2A2' }
                ]
            }
        },
        isStop: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    data() {
        return {
            msg: '',
            promiseArr: [],
            currentGrou: 0
        }
    },
    mounted() {
        console.log('执行第：1组')
        // 计算总时长
        const groupDuration = this.getTotalDuration()
        // 画圆圈
        this.drawCircle(groupDuration)
        if (this.isStop) {
            this.$refs.rotate.style.animationPlayState = 'paused'
            this.$refs.circle.style.animationPlayState = 'paused'
        } else {
            this.start()
        }
    },
    watch: {
        isStop(val) {
            if (!val) this.start()     
        }  
    },
    methods: {
        start() {   
            this.$refs.rotate.style.animationPlayState = 'running'
            this.$refs.circle.style.animationPlayState = 'running'
            this.getPromiseArr()
            this.doPromise()
            console.log('开始动画 3')
        },
        // TODO: 计划角度、时长可优化
        drawCircle(groupDuration) {
            const canvas = this.$refs.canvas
            const ctx=canvas.getContext('2d');
            ctx.lineWidth = 30
            
            var degArray = []
            for ( let i in this.groupInfo) {
                var deg = ''
                if (i == 0) {
                    deg = (this.groupInfo[i].duration * 360) / groupDuration
                } else {
                    deg = ((this.groupInfo[i].duration * 360) / groupDuration) + degArray[i - 1]
                }
                degArray.push(deg)

                const beginDeg = Number(i) ? degArray[i - 1] : 0

                ctx.beginPath();
                ctx.strokeStyle = this.groupInfo[i].bg
                ctx.arc(250, 250, 235, Math.PI * beginDeg / 180, Math.PI* degArray[i] /180, false);
                ctx.stroke();  
                console.log(i,deg)
            }
        },
        // 获取一组时长
        getTotalDuration() {
            return this.groupInfo.reduce((total, num) => {   
                if (total instanceof Object) {
                    return total.duration + num.duration
                } else if (!isNaN(total)){
                    return total + num.duration
                }
            })
        },
        getPromiseArr() {
            for (let i in this.groupInfo) {   
                let promise = (()=> {
                    let txt = this.groupInfo[i].msg
                    this.msg = txt
                    this.rotate(this.groupInfo[i].duration, this.groupInfo[i].centerBg)
                    return new Promise(resolve => {
                        setTimeout(()=>{ 
                            resolve(txt)
                        }, this.groupInfo[i].duration * 1000) 
                    })
                })
                this.promiseArr.push(promise)
            }
        },
        async doPromise() {
            const groupnum = this.allGroupNum
            var arr = []
            for (var i = 0; i < groupnum; i++) {
                arr = arr.concat(this.promiseArr)
            }
            console.log(arr)
            for (let p in arr) {
                this.currentGrou = parseInt(p / this.groupInfo.length)
                console.log(p, await arr[p]())
                if (p == (groupnum * this.groupInfo.length - 1)) {
                    console.log('停止动画')
                    this.$refs.rotate.style.animationPlayState = 'paused'
                    this.$refs.circle.style.animationPlayState = 'paused'
                    // this.msg = '结束'
                }
            }
        },
        // 旋转 如果使用js 只有选择定时器和requestanimationframe，屏幕帧率过大的会有问题；纠结中使用了css 就不能支持自定义了
        rotate() {
        
        },
    }
}
</script>
<style scoped>
.animation{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.canvas{
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.circle{
    height: 500px;
    width: 500px;
    border-radius: 50%;
    position: relative;
    animation-play-state: paused;
    animation: myscale 19s linear infinite;
    zoom: 0.6;
}
@keyframes myscale {
    0% {
        transform: scale(0.9);
    }
    21% {
        transform: scale(1.1);
    }
    57.8% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

.tips{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    /* color: #fff; */
}
.rotate{
    position: absolute;
    top: 0px;
    left: 50%;
    height: 50%;
    width: 50px;
    margin-left: -25px;
    /* 动画时长 */
    animation-play-state: paused;
    animation: myrotate 19s linear infinite;
    transform-origin: 50% 100%;
}
.rotate:after{
    content: '';
    height: 0;
    width: 100%;
    padding-top: 100%;
    position: absolute;
    /* 值受tip的宽度有影响 */
    top: -50px;
    left: 0;
    border-radius: 50%;
    background: #E3A2A2;
}
@keyframes myrotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}
.num{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 30px;
}
</style>